<!--服务订单 -->
<template>
	<view class="main">
	<view class="content">
	<TopTabBar ref="tabModal" :telephone="phone" @update:data="handleDataFromChild" /> <!-- 引入顶部 Tab 导航栏组件 -->
	</view>
	<view class="avatar-info">
		<input type="text"
		  placeholder="请输入运单号、品名、收货人电话查询"
		  v-model="inputValue"
		  class="contact-info"
		  @input="searchItemsByKeyword"></input>
	</view>
	<div v-if="items.length === 0" class="empty-state">
	    <div class="content-center">
	            <img src="../../../static/空数据.png" style="height:150px;width:180px;">
	            <p style="font-size:20px;margin-top:10px;text-align:center;">暂无数据!</p>
	        </div>
	</div>
	<div v-else>
	<div v-for="(item, index) in queryResult" :key="index" class="outer-content-list" >
		<view class="content">
			<view class="content-list">
				<p class="avatar-list">
				<span class="options-yun">运单号</span>
				<!-- <span class="delivery-options" v-if="item.waybillNumber!=null">{{item.waybillNumber}}</span> -->
				<span class="delivery-options1">{{item.waybillNumber}}</span>
				<!-- <span class="price">费用</span> -->
				<span class="price" v-if="item.abnormalStatus===1" style="position: relative;left: 10px;">未处理</span>
				<span class="price" v-if="item.abnormalStatus===2" style="position: relative;left: 10px;">未完结</span>
				<span class="price" v-if="item.abnormalStatus===3" style="position: relative;left: 10px;">已完结</span>
				<!-- <span class="money" v-if="item.sanbaoCost!=null">￥{{item.sanbaoCost.toFixed(2)}}</span> -->
				<!-- <span class="money">￥{{item.sanbaoCost.toFixed(2)}}</span> -->
				</p>
			</view>
		</view>
	<view class="content-list-1">
		<p class="avatar-list">
		<span class="shipment">货件信息</span>
		<span class="description" v-if="item.description!=null">{{item.description}}</span>
		<span class="algebra" v-if="item.number!=null">{{item.number}}件</span>
		<span class="one"> 1 </span>
		<span class="kg" v-if="item.weight!=null">{{item.weight}}kg</span>
		<span class="meter" v-if="item.volume!=null">{{item.volume}}m³</span>
		</p>
	</view>
	<view class="content-list-6">
		<p class="avatar-list">
		<span class="options">收货人</span>
		<span class="delivery-options" v-if="item.putUserName!=null">{{item.putUserName}}</span>
		<span class="delivery-number" v-if="item.putPhone!=null" @click="call(item,index)">{{item.putPhone}}</span>
		<span class="delivery-icon"><image src="../../../static/电话.png"></image></span>
		</p>
	</view>
	<view class="content-list-7">
		<p class="avatar-list">
		<span class="options">送货地址</span>
		<span class="delivery-options" >到站:{{item.destinationStation}}<span v-if="item.consigneeDetailedAddress!=null">{{item.consigneeDetailedAddress}}</span></span>
		<view class="delivery-axis"><image src="../../../static/坐标.png"></image></view>
		</p>
	</view>
	<view class="content-list-7">
		<p class="avatar-list">
		<span class="abnormal-options">异常</span>
		<span class="delivery-options"></span>
		</p>
	</view>
	<view class="content-list-7">
		<p class="avatar-list">
		<span class="options">补偿</span>
		<span class="delivery-options" v-if="item.compensate!=null">{{item.compensate}}</span>
		</p>
	</view>
	<view class="content-list-13">
		<p class="avatar-list13">
		<span class="options">扣除</span>
		<span class="delivery-options" v-if="item.deductMoney!=null">{{item.deductMoney}}</span>
		</p>
	</view>
	<view class="content-list-14">
		<p class="avatar-button">
		<button class="booked" v-if="currentIndex==1||currentIndex==2" @click="showInputModal(item, index)" >↷预约</button>
		<button class="booked" v-if="currentIndex==2" @click="abnormalToOrder(item, index)">√完结</button>
		<button class="lading" @click="detailsToOrder(item, index)">√详情</button>
		</p>
		<div class="end"></div>
	</view>
	</div>
	</div>
	<view>
		<div class="end2" v-if="items.length > 0" ></div>
	</view>
	<view class="content-list-15">
		<p class="avatar-order">
		<text>合计： {{items.length}}条记录</text>
		</p>
	</view>
	<InputModal ref="inputModal" @update:data="handleAddItem" :item="item"/>
	</view>
</template>

<script>
	import TopTabBar from '@/pagesA/components/abnormalNavBar/abnormalNavBar.vue'; 
	import InputModal from '@/pagesA/components/InputModal/InputModal.vue';
	import {reservation,abnormal} from '@/api/abnormal.js';
	export default {
		components: {
		   TopTabBar,
		   InputModal
		 },
		data() {
			return {
				items:[
				],
				req:{},
				item:{},
				phone:'',
				currentIndex:0,
				queryResult:[],
				inputValue:'',
				abnormalId:'',
			}
		},
		onLoad(options) {
			this.phone=options.phone
			this.userId=options.userId
			this.selectedOption=options.selectedOption
			console.log(this.phone);
		    },
		mounted(){
			this.req.status=0
			this.req.contactInformation=this.phone
			console.log(this.req)
			abnormal(this.req).then(res =>{
				this.items=res.data.data
				this.queryResult=res.data.data
			}).catch((error) => {
			});
		},
		methods: {
			handleAddItem(data) {
				let quest=data;
				quest.abnormalId=this.abnormalId
				console.log(quest);
				 reservation(quest).then(res =>{
				 if(res.data.status===400){
					 console.log(res);
					 uni.showToast({
					     title: res.data.errorMessage,
					     icon: 'none',
					 });
					 return;
				 }
				 uni.showToast({
				 	        title: '预约成功',
				 	        icon: 'success',
				 	    });
				this.$refs.tabModal.switchTab(1);
				 }).catch((error) => {
				     // 请求失败
				     console.error('预约失败', error);
				     uni.showToast({
				         title: '预约失败，请重试',
				         icon: 'none',
				     });
				 });
				  
			      // 将新数据添加到 items 数组中
			      
			      // 由于 Vue 的响应式系统，视图将自动更新
			    },
			showInputModal(item, index) {
				this.item=item;
				this.abnormalId=item.id
			      this.$refs.inputModal.showModal('预约', {
			        onConfirm: (value) => {
			          console.log('用户输入:', value);
			          // 在这里处理用户输入的内容
			        },
			        onCancel: () => {
			          console.log('用户取消了输入');
			        }
			      });
			    },
			abnormalToOrder(item,index){
				const businessId = item.businessId;
				const id = item.id;
				uni.navigateTo({
					url: '/pages/index/pictureToast/pictureToast?businessId='+businessId+"&phone="+ this.phone+"&id="+ id// 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
			call(item,index){
				const phoneNumber=item.putPhone
				this.callPhone(phoneNumber)
			},
			callPhone(phoneNumber) {
			        // 检查传入的电话号码是否为空或格式不正确
			        if (!phoneNumber || typeof phoneNumber !== 'string' || !/^\d+$/.test(phoneNumber)) {
			            uni.showToast({
			                title: '电话号码格式不正确',
			                icon: 'none'
			            });
			            return;
			        }
			 
			        // 使用uni.makePhoneCall发起电话拨打请求
			        uni.makePhoneCall({
			            phoneNumber: phoneNumber, // 此处填写要拨打的电话号码
			            success: function () {
			                // 用户确认拨打后，此回调会被触发
			                console.log('用户已确认拨打');
			            },
			            fail: function (err) {
			                // 用户取消拨打或拨打电话失败时，此回调会被触发
			                console.error('拨打电话失败：', err);
			                uni.showToast({
			                    title: '拨打电话失败，请检查您的设置或重试',
			                    icon: 'none'
			                });
			            }
			        });
			    },
			searchItemsByKeyword() {
				 let keyword = '';
				  if (this.inputValue !== undefined && this.inputValue !== null) {
				      keyword = this.inputValue.toLowerCase();
				  }else{
					  this.items
				  }
			        this.queryResult  = this.items.filter(item => {
			            return (
							(item.waybillNumber !== null &&item.waybillNumber.toLowerCase().includes(keyword)) ||
							(item.description !== null &&item.description.toLowerCase().includes(keyword)) ||
							(item.putUserName !== null &&item.putUserName.toLowerCase().includes(keyword)) ||
							(item.putPlane !== null &&item.putPlane.toLowerCase().includes(keyword))
			            );
			        });
					// this.items=this.queryResult;
			    },
			handleDataFromChild(data){
				this.items=data.items
				this.queryResult=data.items
				// 接收来自子组件的数据
				this.currentIndex = data.currentIndex;
			},
			detailsToOrder(item,index){
				const selectedItem = item.businessId;
				uni.navigateTo({	
					url: '/pages/index/abnormalDetails/abnormalDetails?id='+selectedItem // 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
		}
	}
</script>

<style scoped>
@import "abnormalOrder.css";
</style>
